<template>
	<view class="content">
		<view class="nav">
			<view class="nav_item" v-for="(item,index) in navs" :key="index" @click="navItemClick(item.path)">
				<view ></view>
				<text>{{item.title}}</text>
			</view>
		
		</view> 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navs: [
					{
						icon: 'iconfont icon-ziyuan',
						title: 'AGV状态',
						path: '/pages/device/device'
					},
					{
						icon: 'iconfont icon-guanyuwomen',
						title: '设备状态',
						path: '/pages/contact/contact'
					},
					{
						icon: 'iconfont icon-tupian',
						title: '告警信息',
						path: '/pages/alarm-info/alarm-info'
					},
					{
						icon: 'iconfont icon-shipin',
						title: '任务信息',
						path: '/pages/videos/videos'
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
			navItemClick(url){
				console.log(url)
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.nav{
		display: flex;
		.nav_item{
			width: 25%;
			text-align:center;
			view{
				width: 120rpx;
				height: 120rpx;
				background: $shop-color;
				border-radius: 60rpx;
				margin: 10px auto;
				line-height: 120rpx;
				color: #FFF;
				font-size: 50rpx;
			}
			.icon-tupian{
				font-size: 45rpx;
			}
			text{
				font-size: 30rpx;
			}
		}
	}
</style>
